<template>
  <div>
    <h1 style="text-align: center; padding-top: 50px">自动构建工具</h1>
    <div v-if="descFlag">
      <div style="text-align: center; padding: 50px;">
        <h3 style="font-weight: normal">作者：PlanMak1r</h3>
        <h3 style="font-weight: normal">微信：17359897003</h3>
        <h3 style="font-weight: normal">后台源码地址：<a style="color: black; text-decoration: none"
            href="https://gitee.com/yppah-store/auto-build" target="_blank">https://gitee.com/yppah-store/auto-build</a>
        </h3>
        <h3 style="font-weight: normal">前台源码地址：<a style="color: black; text-decoration: none"
            href="https://gitee.com/yppah-store/auto-build-ui"
            target="_blank">https://gitee.com/yppah-store/auto-build-ui</a></h3>
      </div>
      <div style="min-height: 100vh; display: flex; justify-content: center; gap: 100px; padding: 25px;">
        <div @click="openAll"
          style="cursor: pointer; width: 300px; height: 250px; background-color: gray; border-radius: 25px; text-align: center; line-height: 250px; font-size: 24px">
          构建整体</div>
        <div @click="openCRUD"
          style="cursor: pointer; width: 300px; height: 250px; background-color: green; border-radius: 25px; text-align: center; line-height: 250px; font-size: 24px">
          构建CRUD</div>
      </div>
    </div>
    <div v-if="allFlag">
      <el-steps :active="allActive" finish-status="success" style="padding: 25px 75px 50px 75px">
        <el-step title="1" />
        <el-step title="2" />
        <el-step title="3" />
        <el-step title="4" />
        <el-step title="5" />
      </el-steps>
      <el-row>
        <el-col :span="16">
          <div :active="allActive">
            <div v-if="allActive === 1"
              style="width: 75%; margin: 0 auto; background-color: #eee; padding: 50px; border-radius: 25px;">
              <el-form :model="allForm" label-width="225px">
                <el-form-item label="输入项目路径：">
                  <el-input v-model="allForm.outputDir" @blur="handleAppendAllAlert('项目路径：', allForm.outputDir)" />
                </el-form-item>
                <el-form-item label="输入项目名称：">
                  <el-input v-model="allForm.projectName" @blur="handleAppendAllAlert('项目名称：', allForm.projectName)" />
                </el-form-item>
                <el-form-item label="输入项目包名：">
                  <el-input v-model="allForm.rootPackage" @blur="handleAppendAllAlert('项目包名：', allForm.rootPackage)" />
                </el-form-item>
              </el-form>
            </div>
            <div v-if="allActive === 2"
              style="width: 75%; margin: 0 auto; background-color: #eee; padding: 50px; border-radius: 25px;">
              <el-form :model="allForm" label-width="225px">
                <el-form-item label="输入数据库连接：">
                  <el-input v-model="allForm.mysqlHost" @blur="handleAppendAllAlert('数据库连接：', allForm.mysqlHost)" />
                </el-form-item>
                <el-form-item label="输入数据库端口：">
                  <el-input v-model="allForm.mysqlPort" @blur="handleAppendAllAlert('数据库端口：', allForm.mysqlPort)" />
                </el-form-item>
                <el-form-item label="输入数据库名称：">
                  <el-input v-model="allForm.mysqlDatabase"
                    @blur="handleAppendAllAlert('数据库名称：', allForm.mysqlDatabase)" />
                </el-form-item>
                <el-form-item label="输入数据库账号：">
                  <el-input v-model="allForm.mysqlUsername"
                    @blur="handleAppendAllAlert('数据库账号：', allForm.mysqlUsername)" />
                </el-form-item>
                <el-form-item label="输入数据库密码：">
                  <el-input v-model="allForm.mysqlPassword"
                    @blur="handleAppendAllAlert('数据库密码：', allForm.mysqlPassword)" />
                </el-form-item>
                <el-form-item label="输入Redis连接：">
                  <el-input v-model="allForm.redisHost" @blur="handleAppendAllAlert('Redis连接：', allForm.redisHost)" />
                </el-form-item>
                <el-form-item label="输入Redis端口：">
                  <el-input v-model="allForm.redisPort" @blur="handleAppendAllAlert('Redis端口：', allForm.redisPort)" />
                </el-form-item>
                <el-form-item label="输入Redis数据库：">
                  <el-input v-model="allForm.redisDatabase"
                    @blur="handleAppendAllAlert('Redis数据库：', allForm.redisDatabase)" />
                </el-form-item>
                <el-form-item label=" 输入Redis密码（没有则为空）：">
                  <el-input v-model="allForm.redisPassword"
                    @blur="handleAppendAllAlert('Redis密码(没有则为空)：', allForm.redisPassword)" />
                </el-form-item>
              </el-form>
            </div>
            <div v-if="allActive === 3"
              style="width: 75%; margin: 0 auto; background-color: #eee; padding: 50px; border-radius: 25px;">
              <el-form :model="allForm" label-width="225px">
                <el-form-item label="输入SpringBoot版本：">
                  <el-input v-model="allForm.bootVersion"
                    @blur="handleAppendAllAlert('SpringBoot版本：', allForm.bootVersion)" />
                </el-form-item>
                <el-form-item label="输入项目端口号：">
                  <el-input v-model="allForm.serverPort" @blur="handleAppendAllAlert('项目端口号：', allForm.serverPort)" />
                </el-form-item>
                <el-form-item label="输入项目分支：">
                  <el-input v-model="allForm.branch" @blur="handleAppendAllAlert('项目分支：', allForm.branch)" />
                </el-form-item>
              </el-form>
            </div>
            <div v-if="allActive === 4"
              style="width: 75%; margin: 0 auto; background-color: #eee; padding: 50px; border-radius: 25px;">
              <el-form :model="allForm" label-width="225px">
                <el-form-item label="输入作者：">
                  <el-input v-model="allForm.author" @blur="handleAppendAllAlert('作者：', allForm.author)" />
                </el-form-item>
                <el-form-item label="输入邮箱：">
                  <el-input v-model="allForm.email" @blur="handleAppendAllAlert('邮箱：', allForm.email)" />
                </el-form-item>
                <el-form-item label="输入项目地址统一前缀：">
                  <el-input v-model="allForm.prefix" @blur="handleAppendAllAlert('项目地址统一前缀：', allForm.prefix)" />
                </el-form-item>
              </el-form>
            </div>
            <div v-if="allActive === 5"
              style="width: 75%; margin: 0 auto; background-color: #eee; padding: 50px; border-radius: 25px;">
              <div style="display: flex; justify-content: center">
                <el-form-item label="是否增加JWT：">
                  <el-switch v-model="allForm.jwtFlag" @change="handleChangeAllJwtAndUploadFlag('是否增加JWT：', allForm.jwtFlag)" />
                </el-form-item>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <el-form-item label="是否增加文件上传：">
                  <el-switch v-model="allForm.uploadFlag" @change="handleChangeAllJwtAndUploadFlag('是否增加文件上传：', allForm.uploadFlag)" />
                </el-form-item>
              </div>
              <el-form :model="allForm" label-width="225px">
                <el-form-item label="输入JWT的KEY：" v-if="allForm.jwtFlag">
                  <el-input v-model="allForm.jwtKey" @blur="handleAppendAllAlert('JWT的KEY：', allForm.jwtKey)" />
                </el-form-item>
                <el-form-item label="输入JWT作者： " v-if="allForm.jwtFlag">
                  <el-input v-model="allForm.jwtAuthor" @blur="handleAppendAllAlert('JWT作者： ', allForm.jwtAuthor)" />
                </el-form-item>
                <el-form-item label="输入JWT的token前缀： " v-if="allForm.jwtFlag">
                  <el-input v-model="allForm.jwtPrefix"
                    @blur="handleAppendAllAlert('JWT的token前缀： ', allForm.jwtPrefix)" />
                </el-form-item>
                <el-form-item label="输入JWT过期时间（分钟）： " v-if="allForm.jwtFlag">
                  <el-input v-model="allForm.jwtPeriod"
                    @blur="handleAppendAllAlert('JWT过期时间（分钟）： ', allForm.jwtPeriod)" />
                </el-form-item>
                <el-form-item label="输入文件保存路径：" v-if="allForm.uploadFlag">
                  <el-input v-model="allForm.uploadFolder"
                    @blur="handleAppendAllAlert('文件保存路径： ', allForm.uploadFolder)" />
                </el-form-item>
                <el-form-item label="输入文件访问地址(默认为本地)：" v-if="allForm.uploadFlag">
                  <el-input v-model="allForm.staticPath" @blur="handleAppendAllAlert('文件保存路径：', allForm.staticPath)" />
                </el-form-item>
              </el-form>
            </div>
          </div>
          <div style="text-align: center; margin-top: 20px">
            <el-button @click="allBack">返回</el-button>
            <el-button v-if="allActive !== 1" type="primary" @click="allPrev">上一步</el-button>
            <el-button v-if="allActive !== 5" type="primary" @click="allNext">下一步</el-button>
            <el-button v-if="allActive === 5" @click="allBuild">开始构建</el-button>
          </div>
        </el-col>
        <el-col :span="8">
          <el-alert :closable="false" v-for="(itemAlert, index) in allAlerts" :title="itemAlert" />
        </el-col>
      </el-row>
    </div>
    <div v-if="crudFlag">
      <el-steps :active="crudActive" finish-status="success" style="padding: 25px 75px 50px 75px">
        <el-step title="1" />
        <el-step title="2" />
        <el-step title="3" />
        <el-step title="4" />
      </el-steps>
      <el-row>
        <el-col :span="16">
          <div :active="crudActive">
            <div v-if="crudActive === 1"
              style="width: 75%; margin: 0 auto; background-color: #eee; padding: 50px; border-radius: 25px;">
              <el-form :model="crudForm" label-width="225px">
                <el-form-item label="输入项目路径：">
                  <el-input v-model="crudForm.outputDir" @blur="handleAppendCRUDAlert('项目路径：', crudForm.outputDir)" />
                </el-form-item>
                <el-form-item label="输入项目名称：">
                  <el-input v-model="crudForm.projectName"
                    @blur="handleAppendCRUDAlert('项目名称：', crudForm.projectName)" />
                </el-form-item>
                <el-form-item label="输入项目包名：">
                  <el-input v-model="crudForm.rootPackage"
                    @blur="handleAppendCRUDAlert('项目包名：', crudForm.rootPackage)" />
                </el-form-item>
              </el-form>
            </div>
            <div v-if="crudActive === 2"
              style="width: 75%; margin: 0 auto; background-color: #eee; padding: 50px; border-radius: 25px;">
              <el-form :model="crudForm" label-width="225px">
                <el-form-item label="输入数据库连接：">
                  <el-input v-model="crudForm.host" @blur="handleAppendCRUDAlert('数据库连接：', crudForm.host)" />
                </el-form-item>
                <el-form-item label="输入数据库端口：">
                  <el-input v-model="crudForm.port" @blur="handleAppendCRUDAlert('数据库端口：', crudForm.port)" />
                </el-form-item>
                <el-form-item label="输入数据库名称：">
                  <el-input v-model="crudForm.database" @blur="handleAppendCRUDAlert('数据库名称：', crudForm.database)" />
                </el-form-item>
                <el-form-item label="输入数据库账号：">
                  <el-input v-model="crudForm.username" @blur="handleAppendCRUDAlert('数据库账号：', crudForm.username)" />
                </el-form-item>
                <el-form-item label="输入数据库密码：">
                  <el-input v-model="crudForm.password" @blur="handleAppendCRUDAlert('数据库密码：', crudForm.password)" />
                </el-form-item>
              </el-form>
            </div>
            <div v-if="crudActive === 3"
              style="width: 75%; margin: 0 auto; background-color: #eee; padding: 50px; border-radius: 25px;">
              <el-form :model="crudForm" label-width="225px">
                <el-form-item label="输入作者：">
                  <el-input v-model="crudForm.author" @blur="handleAppendCRUDAlert('作者：', crudForm.author)" />
                </el-form-item>
                <el-form-item label="输入邮箱：">
                  <el-input v-model="crudForm.email" @blur="handleAppendCRUDAlert('邮箱：', crudForm.email)" />
                </el-form-item>
              </el-form>
            </div>
            <div v-if="crudActive === 4"
              style="width: 75%; margin: 0 auto; background-color: #eee; padding: 50px; border-radius: 25px;">
              <el-form-item label="输入表名：">
                <el-input v-model="crudForm.tableName" @blur="handleAppendCRUDAlert('表名：', crudForm.tableName)" />
              </el-form-item>
              <el-form-item label="输入实体类名称：">
                <el-input v-model="crudForm.model" @blur="handleAppendCRUDAlert('邮箱：', crudForm.model)" />
              </el-form-item>
              <el-form-item label="输入实体类描述：">
                <el-input v-model="crudForm.title" @blur="handleAppendCRUDAlert('邮箱：', crudForm.title)" />
              </el-form-item>
              <el-form-item label="是否构建树：">
                <el-switch v-model="crudForm.isTree" @click="handleChangeCRUDIsTree('是否构建树：', crudForm.isTree)" />
              </el-form-item>
            </div>
          </div>
          <div style="text-align: center; margin-top: 20px">
            <el-button @click="crudBack">返回</el-button>
            <el-button v-if="crudActive !== 1" type="primary" @click="crudPrev">上一步</el-button>
            <el-button v-if="crudActive !== 4" type="primary" @click="crudNext">下一步</el-button>
            <el-button v-if="crudActive === 4" @click="crudBuild">开始构建</el-button>
          </div>
        </el-col>
        <el-col :span="8">
          <el-alert :closable="false" v-for="(itemAlert, index) in crudAlerts" :title="itemAlert" />
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue';
import axios from 'axios'

const allForm = reactive({
  outputDir: "",
  projectName: "",
  rootPackage: "",
  mysqlHost: "",
  mysqlPort: "",
  mysqlDatabase: "",
  mysqlUsername: "",
  mysqlPassword: "",
  redisHost: "",
  redisPort: "",
  redisDatabase: "",
  redisPassword: "",
  bootVersion: "",
  serverPort: "",
  branch: "",
  author: "",
  email: "",
  prefix: "",
  jwtKey: "",
  jwtAuthor: "",
  jwtPrefix: "",
  jwtPeriod: "",
  uploadFolder: "",
  staticPath: "",
  jwtFlag: false,
  uploadFlag: false
})

const crudForm = reactive({
  outputDir: "",
  projectName: "",
  rootPackage: "",
  host: "",
  port: "",
  database: "",
  username: "",
  password: "",
  author: "",
  email: "",
  tableName: "",
  model: "",
  title: "",
  isTree: false
})

const descFlag = ref(true);
const allFlag = ref(false);
const crudFlag = ref(false);

const openAll = () => {
  descFlag.value = false;
  allFlag.value = true;
}

const openCRUD = () => {
  descFlag.value = false;
  crudFlag.value = true;
}

const allActive = ref(1);

const allBack = () => {
  allFlag.value = false;
  descFlag.value = true;
}

const allPrev = () => {
  if (allActive.value > 1) {
    allActive.value--;
  }
}

const allNext = () => {
  if (allActive.value < 5) {
    allActive.value++;
  }
}

const allBuild = () => {
  axios.post('http://localhost:8080/autoBuild/all', allForm).then(res => {
    console.log(res);
    if (res.status === 200) {
      alert("构建成功");
      allFlag.value = false;
      descFlag.value = true;
    } else {
      alert("出错了...");
    }
  })
}

const crudActive = ref(1);

const crudBack = () => {
  crudFlag.value = false;
  descFlag.value = true;
}

const crudPrev = () => {
  if (crudActive.value > 1) {
    crudActive.value--;
  }
}

const crudNext = () => {
  if (crudActive.value < 4) {
    crudActive.value++;
  }
}

const crudBuild = () => {
  console.log(crudForm);
  axios.post('http://localhost:8080/autoBuild/crud', crudForm).then(res => {
    console.log(res);
    if (res.status === 200) {
      alert("构建成功");
      crudFlag.value = false;
      descFlag.value = true;
    } else {
      alert("出错了...");
    }
  })
}

const allAlerts = ref([]);

const handleAppendAllAlert = (desc, el) => {
  var element = el ? el : "";
  var cindex = allAlerts.value.findIndex(item => item.startsWith(desc));
  if (element) {
    if (cindex === -1) {
      allAlerts.value.push(desc + element);
    } else {
      allAlerts.value.splice(cindex, 1);
      allAlerts.value.push(desc + element);
    }
  } else {
    allAlerts.value.splice(cindex, 1);
  }
}

const handleChangeAllJwtAndUploadFlag = (desc, el) => {
  var cindex = allAlerts.value.findIndex(item => item.startsWith(desc));
  if (cindex === -1) {
      allAlerts.value.push(desc + el);
    } else {
      allAlerts.value.splice(cindex, 1);
      allAlerts.value.push(desc + el);
    }
}

const crudAlerts = ref([]);

const handleAppendCRUDAlert = (desc, el) => {
  var element = el ? el : "";
  var cindex = crudAlerts.value.findIndex(item => item.startsWith(desc));
  if (element) {
    if (cindex === -1) {
      crudAlerts.value.push(desc + element);
    } else {
      crudAlerts.value.splice(cindex, 1);
      crudAlerts.value.push(desc + element);
    }
  }
}

const handleChangeCRUDIsTree = (desc, el) => {
  var cindex = crudAlerts.value.findIndex(item => item.startsWith(desc));
  if (cindex === -1) {
      crudAlerts.value.push(desc + el);
    } else {
      crudAlerts.value.splice(cindex, 1);
      crudAlerts.value.push(desc + el);
    }
}
</script>

<style scoped>
.el-alert--info {
  --el-alert-bg-color: transparent !important;
  --el-color-info: black !important;
  --el-alert-title-font-size: 16px !important;
}

.el-form-item .el-form-item__content {
  margin: 0 20px !important;
}
</style>